<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 800px;
            height: 800px;
            background-color: silver;
            overflow: hidden;
        }
        .box1 div{
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
            margin-left: 0;
        }
        .box2{
            background-color: #bfa;
            /* margin-left: 700px; */
            /* transition:all 2s; */
            /* 
                过渡（transition）
                    -通过过渡可以指定一个属性发生变化时的切换方式
                    -通过过渡可以创建一些非常好的效果，提升用户体验
            */
            /* 
            transition-property :指定要执行过渡的属性
                多个属性间使用，隔开    
                如果所有属性需要过渡，则使用all
                大部分属性都支持过渡效果,注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
            */
            /* transition-property:width,height; */
            transition-property:all;
            /* 
                 transition-duration :指定过渡效果的持续时间
                 时间单位：s 和 ms
            */
            /* transition-duration: 2s,200ms; */
            transition-duration: 2s;


            /* 
                transition-timing-function 
                过渡的时序函数
                    可选值：
                        ease 默认值，慢速开始，先加速，然后再减速
                        linear 匀速运动
                        ease-in 加速运动
                        ease-out 减速运动
                        ease-in-out 先加速 后减速
                        cubic-bezier() 来指定时许函数
                            http://cubic-bezier.com
                        steps()分步执行过渡效果
                            steps(2,end) 时间结束后开始执行
                            steps(2,start)  时间开始时执行
            */
            transition-timing-function: cubic-bezier(.42,0,.58,1);
            /* transition-timing-function: steps(2,end); */


            /* 
                transition-delay ：过渡效果的延迟
                    等待一段时间后在执行过渡
             */
             /* transition-delay:2s ; */

             /* transition 可以设置过渡相关的所有属性，
                只有一个要求，如果要写延迟，两个时间中第一个是持续的时间，第二个是延迟时间
             */
        }
        /* .box3{
            background-color: orange;
            transition-property:all;
            transition-duration: 2s;
        } */
        .box1:hover div{
            /* width: 200px; */
            /* height: 200px; */
            /* background-color: orange; */
            margin-left: 700px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <!-- <div class="box3"></div> -->
    </div>
</body>
</html>